<template>
  <div>
    <el-card>
      <el-row type="flex" justify="end">
        <el-button type="primary" icon="el-icon-edit" @click="isShow=true">添加</el-button>
      </el-row>
      <!-- 树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树树 -->
      <el-table
        :data="list"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        default-expand-all
        :tree-props="{children: 'points',hasChildren: 'hasChildren'}"
      >
        >
        <el-table-column label="标题" width="280">
          <template slot-scope="{ row }">
            <i
              v-if="row.points"
              class="el-icon-folder-opened"
              style="
                  margin: right 4px;
                  font-size: 20px;
                  vertical-align: middle;
                "
            />
            <i
              v-else
              class="el-icon-document-checked"
              style="
                  margin: right 4px;
                  font-size: 20px;
                  vertical-align: middle;
                "
            />

            <span>{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="权限点代码" width="970" />
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-row type="flex" justify="center">
              <el-button type="primary" size="small" @click="editBtn(row.id)">修改</el-button>
              <el-button
                type="danger"
                size="small"
                @click="delBtn(row.id)"
              >删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹框 -->
      <el-dialog
        :title="formData.id?'修改菜单':'创建菜单'"
        :visible.sync="isShow"
        width="40%"
        @close="close"
      >
        <el-form
          ref="form"
          :model="formData"
          :rules="formRulse"
          label-width="120px"
          :inline="false"
          size="normal"
        >
          <el-form-item label="权限组名称">
            <el-radio v-model="formData.is_point" :disabled="formData.id?true:false" :label="false">菜单</el-radio>
            <el-radio v-model="formData.is_point" :disabled="formData.id?true:false" :label="true">权限点</el-radio>
          </el-form-item>
          <el-form-item label="权限组名称">
            <el-select v-model="formData.pid" placeholder="请选择">
              <el-option label="主导航" :value="null" />
              <el-option
                v-for="item in menuslist"
                :key="item.id"
                :disabled="formData.is_point&& item.childs?true:false"
                :label="item.title"
                :value="item.id"
                :class="{'child':item.pid}"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="权限代码" prop="code" style="width: 400px">
            <el-input v-model="formData.code" size="normal" />
          </el-form-item>
          <el-form-item label="权限标题" prop="title" style="width: 400px">
            <el-input v-model="formData.title" size="normal" />
          </el-form-item>
        </el-form>

        <span slot="footer">
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" @click="btnOK">确定</el-button>
        </span>
      </el-dialog>
    </el-card>

  </div>

</template>

<script>
import { getMenuList, deltMenu, getMenusList, editMenu, addMenu } from '@/api/menu'
import { tranListToTreeData } from '@/utils'
export default {
  name: 'Menus',
  data() {
    return {
      list: [], // 数据列表
      isShow: false, // 弹框
      formData: {
        is_point: false,
        pid: null
      },
      menuslist: [], // 下拉框数据
      formRulse: {
        title: [{ required: true, message: '请输入权限标题', trigger: 'blur' }],
        code: [{ required: true, message: '请输入权限代码', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const res = await getMenuList()
      this.list = this.Formatting(res)
      this.menuslist = tranListToTreeData(res)
      // console.log(this.list)
      // points
      // console.log(res)
    },
    // 删除
    async delBtn(id) {
      // 提示信息
      await this.$confirm('是否确认删除')
      // 发送请求
      await deltMenu(id)
      // 更新列表
      this.initData()
    },
    // 关闭
    close() {
      this.$refs.form.clearValidate()
      this.formData = {
        is_point: false,
        pid: null
      }
    },
    // 添加
    async  btnOK() {
      await this.$refs.form.validate()

      if (this.formData.id) {
      // 修改
        await editMenu(this.formData)
      } else {
      // 添加
        await addMenu(this.formData)
      }

      this.$message.success('操作成功')

      this.initData()

      this.isShow = false
    },
    // 数据回显
    async editBtn(id) {
      const res = await getMenusList(id)
      // console.log(res)
      this.formData = res
      this.isShow = true
    },
    // 数据格式化
    Formatting(list) {
      // 循环传入的数组
      list.forEach(elem => {
        // 把每一个键名为childs的键值对的！！数据！！赋值给键名为points的键值对
        elem['points'] = elem.childs // 这里的points为目标属性名
        // 删除键名为childs的键值对
        delete elem.childs
      })
      // 把修改好的数组返回出去
      return list
    }
  }
}
</script>

<style>
  .child{
  padding-left: 40px;
}
</style>
